<template>
  <div class="box">
    <el-card class="box-card">
      <template #header>
      <div class="clearfix">
        <span>欢迎登录</span>
      </div>
      </template>
      <div class="text item">
        <el-form :model="user"  :rules="rules" ref="loginForm"  class="demo-ruleForm">
          <el-form-item prop="username" >
              <el-input placeholder="请输入账号" v-model="user.username" autocomplete="off">
                <template #prepend>
                  <el-button icon="el-icon-user-solid"></el-button>
                  </template>
              </el-input>
            </el-form-item>
            <el-form-item  prop="password">
              <el-input type="password"  placeholder="请输入密码" v-model="user.password" autocomplete="off">
                <template #prepend>
                <el-button  icon="el-icon-s-goods"></el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="login-primary" @click="handleLogin ">登录</el-button>
            </el-form-item>
        </el-form>
      </div>
</el-card>
  </div>
</template>
<script>
import { reactive ,getCurrentInstance} from 'vue'
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import {login} from "../http/api"
export default {
  setup() {
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const store = useStore();
    const user=reactive({
        username:"",
        password:""
      })
    const rules={
      username:[
            { required:true, trigger: 'blur' ,message:"请输入用户名"},
          ],
      password:[
            { required:true, trigger: 'blur' ,message:"请输入密码"}
          ]
    }
    const handleLogin =()=>{
      console.log("@@@@",proxy.$refs)
      proxy.$refs.loginForm.validate((valid) => {
          if (valid) {
      console.log(23);
      console.log(user);
            login(user).then(res=>{
                    store.commit('setToken',res.token)
                    store.commit('setUsername',res.username)
                    router.push({
                      name:'Home'
                    })
            })
          } 
        });
    }
    return {user,rules,handleLogin}
    
  },
}
</script>
<style scoped lang="scss">
.box{
  width: 100%;
  height: 100vh;
  background-image:url(https://file.iviewui.com/admin-dist/img/login-bg.0899ffa6.jpg) ;
  background-size: 100% 100%;
  background-position-x: 50%;
  background-position-y: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}


  .box-card {
    width: 300px;
    margin-right: 150px;
  }
  .login-primary{
    width: 100%;
  }
  .el-card, .el-message {
    border-radius: 5%;
}
</style>


